Getting Started

Theme Info

Created: 13/03/2016

Thank you for Downloading my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my contact page. Thanks so much!

If you have any problem about this template then please visit ThemeXpose.com

Note : Premium and lifetime support only delivered to Full version buyers.

But this is only free version (Free Template Will Contain Non Removable Credits and limited features).

It is forbidden to remove the credit link due to the elimination of the credit links will make your blog to redirect ThemeXpose Official site. For those who want to remove can pay $ 6.95.

Buy our Full Version and get:

1.Remove Footer credits

2.One time payment

3.For Unlimited Domains

4.Lifetime Premium Support

5.No Encrypted Scripts

6.Lifetime Template Updates

7.And Much More....

Buy now from ThemeXpose.com

Socio is a clean and responsive Blogger template with Responsive layout and suited for all blog. It's design with minimalist and simple color combination, clean and modern look, SEO Optimized, and has been built by using some of the most popular current design trends.

Features

  • Responsive
  • SEO
  • Dynamic Heading
  • 2 Column Style
  • Clean Typography
  • Minimalist
  • Homepage Share Button
  • Responsive Dropdown Navigation
  • Light Base Theme Color
  • Breadcrumbs
  • Related Posts with Thumb
  • Search Box
  • Social Share Button
  • Numbered Page Navigation
  • Custom 404 Page
  • Smooth Scroll back To Top
  • Custom Subscribe Box Widget
  • Multi Author Box
  • And more..

Installation

When you are ready to install a theme, you must first upload the theme file. The theme files can be uploaded in two ways:

  • Blogger Upload : Go to your dashboard > Template > Backup / Restore > Upload the .xml.
  • Copy And Paste : By open your template by Notepad and copy the entire text and paste it into Template in your dashboard.

Now click on "Browse" and select from your drive Socio-Blogger-Template.xml
After click on "Upload" and wait to finish upload.

Or click on "Edit HTML"

And open .xml file by Notepad and select all "Ctrl+A", and copy entire text and paste it here :


Customize Theme

To these phase we will customize the template and install some widgets and add some Html.

Header Options

Logo Settings :

In your dashboard Select "Layout".

Upload Your Logo Header : In You Blog (Header), Click on "Edit" and applicate all settings below :

Settings Your Blog Posts :

In Blog Posts, Click on "Edit" and applicate all settings below :

Main Navigation :

1. Go to Blogger Dashboard > Layout > Main Menu > click on edit button

Normal Link: Mylink

Sub Link:_MyLink

Image Example:

Social Icons :

1. Go to Blogger Dashboard > Layout > Social Header / Social Buttons. > click on edit button

Icons Avaliables { facebook, twitter, gplus, rss, youtube, skype, stumbleupon, tumblr, vine, stack-overflow, linkedin, dribbble, soundcloud, behance, digg, instagram, pinterest, delicious, codepen }


Featured Posts (Top Below Menu Navigation):

1. Go to Blogger Dashboard > Layout > click Add a Gadget > HTML/JavaScript on Feat Section section

This Code: [your label here]

Example: [Fashion]

Image Example

Featured Post (Above the latest posts) :

1. Go to Blogger Dashboard > Layout > featured post > click on edit button

Image Example


Global Options Panel :

Go to Blogger Dashboard > Layout > click Edit link to the Desired Option.

1. Animation - Scroll IMG - (yes / no)

2. Fixed Menu - (yes / no)

Image Example:

1. Related Posts No - (Number)

2. PageNavi Results No - (Number)

Image Example:

NOTE: In PageNavi Results No is recommended to add the same value of the home page post.


Post Page

Featured and Trendy Badge

When you are writing a post add "featured" or "trendy" word as a label in your post. In which post you add these label that post automatically add a Badge on the coner of the post.

Make sure you write "featured" not "Featured" it is case sensitive and same for the popular


Author Box

About Box

Go to Blogger Dashboard > Layout > Author Box section, you must add all the code below.

Code:

Image Link [your image profile URL Here]

Author Name [Your Name Here]

Author Description [Your description Here]

Facebook Username [You username Here]

Twitter Username [You username Here]

GPlus Username [You username Here]

Pinterest Username [You username Here]

Instagram Username [You username Here]

Example:

Image Link [http://lh3.googleusercontent.com/-WVcT2suMskc/AAAAAAAAAAI/AAAAAAAAALI/gq5ESmvHmAs/s512-c/photo.jpg]

Author Name [ThemeXpose]

Author Description [Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard]

Facebook Username [themexpose]

Twitter Username [themexpose]

GPlus Username [112808915066490310571]

Pinterest Username [themexpose]

Instagram Username [themexpose]

NOTE: You should not remove any element of the code, just replace as above!


Subscribe (Sidebar)

1. Go to Blogger Dashboard > Layout > Subscribe widget sidebar > click on edit button

2. Now copy the below mention code and paste into widget.

3. Change the "feedburner_id" word with your feedburner id

4. Save It

<aside class='g1-box g1-box-centered g1-newsletter g1-newsletter-horizontal'> <i class='g1-box-icon'></i><header><h2 class='g1-delta g1-delta-2nd'>Newsletter</h2> </header><p class="g1-alpha g1-alpha-1st">Get the best viral stories straight into your inbox!</p><form class='mc4wp-form mc4wp-form-313' data-id='313' data-name='Default sign-up form' id='mc4wp-form-1'  action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open("http://feedburner.google.com/fb/a/mailverify?uri=feedburner_id", "popupwindow", "scrollbars=yes,width=550,height=520"); return true" target="popupwindow"><div class='mc4wp-form-fields'> <label>Email address: </label> <input name='EMAIL' placeholder='Your email address' required='' type='email'/><input type='submit' value='Sign up' style="margin-top:10px"/><input name="uri" type="hidden" value="feedburner_id" /><input name='_mc4wp_timestamp' type='hidden' value='1457380575'/><input name='_mc4wp_form_id' type='hidden' value='313'/><input name='_mc4wp_form_element_id' type='hidden' value='mc4wp-form-1'/></div><div class='mc4wp-response'/><p class='g1-newsletter-privacy'>Don't worry we don't spam</p></div></form> </aside>
Subscribe (Post page)

1. Go to Blogger Dashboard > Template > Edit Html > click on edit button

2. Now search for the below mention code.

3. Change the "feedburner_id" word with your feedburner id

4. Save It

<aside class='g1-box g1-box-centered g1-newsletter g1-newsletter-horizontal'> <i class='g1-box-icon'></i><header><h2 class='g1-delta g1-delta-2nd'>Newsletter</h2> </header><p class="g1-alpha g1-alpha-1st">Get the best viral stories straight into your inbox!</p><form class='mc4wp-form mc4wp-form-313' data-id='313' data-name='Default sign-up form' id='mc4wp-form-1'  action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open("http://feedburner.google.com/fb/a/mailverify?uri=feedburner_id", "popupwindow", "scrollbars=yes,width=550,height=520"); return true" target="popupwindow"><div class='mc4wp-form-fields'> <label>Email address: </label> <input name='EMAIL' placeholder='Your email address' required='' type='email'/><input type='submit' value='Sign up' style="margin-top:10px"/><input name="uri" type="hidden" value="feedburner_id" /><input name='_mc4wp_timestamp' type='hidden' value='1457380575'/><input name='_mc4wp_form_id' type='hidden' value='313'/><input name='_mc4wp_form_element_id' type='hidden' value='mc4wp-form-1'/></div><div class='mc4wp-response'/><p class='g1-newsletter-privacy'>Don't worry we don't spam</p></div></form> </aside>

Comments System

Access your blog Layout > click Edit link on Comments system widget.

You can add 4 models of comments.

Only Blogger add: [blogger] and click save!

Only Disqus add: [disqus] and click save!

Only Facebook add: [facebook] and click save!

Add all: [blogger][disqus][facebook] and click save!

NOTE: The display of all is only available in that provision.

NOTE 02: To view the system Disqus comments, you need to follow the steps below.

Comments System

Access your blog Layout > click Edit link on Disqus Shortname widget.

What you have to do is just add the shortname

Change the Main Color of the Template

Go to Blogger Dashboard > Template > Customize

Now Click on Advance > Main color -> change color according to your need and then press apply button.


Mobile Version ( Responsive Design Option )

Mobile Responsive

After you apply mobile version for this template, Color changing option will not work. This is official bug of Blogger. So, please make sure, you used Color changing option before do this step.

As default, Blogger will use its own template for you blog on mobile. So if you want to use Fashion template on mobile devices, please enable it first.

Access your Template menu and click on Gear button of Mobile template.

In Choose mobile template window, check "No. Show desktop template on mobile devices." option, then click Save button.

Socio free version - Themexpose.com

Top